<template>
  <div class="active-container">
    <van-tabbar route>
      <van-tabbar-item to="/getup">
        <span class="title">走起</span>
        <template #icon="props">
          <img src="@/assets/goImages/DO.png" v-if="props.active" />
          <img src="@/assets/goImages/pQ.png" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/activity">
        <span class="title">活动</span>
        <template #icon="props">
          <img src="@/assets/goImages/yq1.png" v-if="props.active" />
          <img src="@/assets/goImages/bc.png" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/user">
        <span class="title">我</span>
        <template #icon="props">
          <img src="@/assets/goImages/7-active.png" v-if="props.active" />
          <img src="@/assets/goImages/7-.png" v-else />
        </template>
      </van-tabbar-item>
    </van-tabbar>

    <div class="bar-container">
      <!-- 搜索导航 -->
      <div class="search-bar">
        <div class="title">活动</div>
        <div class="search-btn" @click="$router.push('/search')">
          <img src="@/assets/goImages/5y.png" />
          <span>搜索</span>
        </div>
      </div>

      <!-- 头部导航 -->
      <div class="filter-icon" @click="imgActive = !imgActive" ref="filter">
        <img src="@/assets/goImages/6c.png" v-if="imgActive" />
        <img src="@/assets/goImages/EO1.png" v-else />
      </div>
      <!-- 弹出层筛选框 -->
      <transition name="filter">
        <mask-filter v-show="!imgActive" @close-filter="closeFilter" @submit="resetRequests = !resetRequests"></mask-filter>
      </transition>
    </div>
    <!-- 导航栏 -->
    <van-tabs v-model="active" animated title-active-color="#000" title-inactive-color="#a1a1a1" sticky offset-top="46px" line-width="60px" @click="toggleTarBar">
      <van-tab>
        <template #title>
          <span>推荐</span>
        </template>
        <template #default>
          <ActivityRecommend />
        </template>
      </van-tab>

      <van-tab>
        <template #title>
          <span>展览</span>
        </template>
        <template #default>
          <ActivityExhibition :reset="resetRequests" />
        </template>
      </van-tab>

      <van-tab>
        <template #title>
          <span>话剧演出</span>
        </template>
        <template #default>
          <ActivityModernDrama :reset="resetRequests" />
        </template>
      </van-tab>

      <van-tab>
        <template #title>
          <span>LIVE</span>
        </template>
        <template #default>
          <ActivityLive :reset="resetRequests" />
        </template>
      </van-tab>

      <van-tab>
        <template #title>
          <span>休闲娱乐</span>
        </template>
        <template #default>
          <ActivityEntertainment :reset="resetRequests" />
        </template>
      </van-tab>

      <van-tab>
        <template #title>
          <span>景点门票</span>
        </template>
        <template #default>
          <ActivityScenicSpot :reset="resetRequests" />
        </template>
      </van-tab>

      <van-tab>
        <template #title>
          <span>亲子</span>
        </template>
        <template #default>
          <ActivityParenting :reset="resetRequests" />
        </template>
      </van-tab>

      <van-tab>
        <template #title>
          <span>音乐会</span>
        </template>
        <template #default>
          <ActivityConcert :reset="resetRequests" />
        </template>
      </van-tab>

      <van-tab>
        <template #title>
          <span>演唱会</span>
        </template>
        <template #default>
          <ActivityVocalConcert :reset="resetRequests" />
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { bus } from '@/utils/bus/bus.js'
import ActivityRecommend from '@/components/activity/recommend/ActivityRecommend.vue'
import MaskFilter from '@/components/activity/recommend/MaskFilter.vue'
import ActivityExhibition from '@/components/activity/exhibition/ActivityExhibition.vue'
import ActivityModernDrama from '@/components/activity/modern-drama/ActivityModernDrama.vue'
import ActivityLive from '@/components/activity/live/ActivityLive.vue'
import ActivityEntertainment from '@/components/activity/entertainment/ActivityEntertainment.vue'
import ActivityScenicSpot from '@/components/activity/scenic-spot/ActivityScenicSpot.vue'
import ActivityParenting from '@/components/activity/parenting/ActivityParenting.vue'
import ActivityConcert from '@/components/activity/concert/ActivityConcert.vue'
import ActivityVocalConcert from '@/components/activity/vocal-concert/ActivityVocalConcert.vue'
export default {
  components: {
    MaskFilter,
    ActivityRecommend, // 推荐
    ActivityExhibition, // 展览
    ActivityModernDrama, // 话剧演出
    ActivityLive, // LIVE
    ActivityEntertainment, // 休闲娱乐
    ActivityScenicSpot, // 景点门票
    ActivityParenting, // 亲子
    ActivityConcert, // 音乐会
    ActivityVocalConcert // 演唱会
  },
  data() {
    return {
      index: 0,
      title: '',
      active: 0,
      resetRequests: false,
      imgActive: true // 右边图标是否选中
    }
  },
  created() {
    bus.$on('send-title', (name) => {
      // tabs的标识符
      if (name) {
        this.active = name
      }
    })
  },
  methods: {
    // // 切换导航激活状态
    toggleTarBar(name) {
      const f = this.$refs.filter
      if (name !== 0) {
        f.style.transform = `translateX(0%)`
      } else {
        f.style.transform = `translateX(100%)`
      }
    },
    closeFilter() {
      this.imgActive = true
    }
  },
  beforeDestroy() {
    bus.$off('send-title')
  }
}
</script>

<style lang="less" scoped>
.active-container {
  padding-top: 46px;
  position: relative;

  .van-tabbar {
    .van-tabbar-item--active .title {
      font-size: 12px;
      color: #d84647;
    }
    .van-tabbar-item__icon img {
      height: 25px;
      width: 25px;
    }
    .title {
      color: #a1a1a1;
    }
    .van-tabbar {
      bottom: -3px;
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }
  .bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;

    // 头部导航
    .search-bar {
      padding: 10px 15px;
      background-color: #d84647;
      line-height: 22px;
      display: flex;
      height: 46px;
      align-items: center;
      justify-content: space-between;

      .title {
        font-size: 18px;
        color: #fff;
      }

      .search-btn {
        display: flex;
        align-items: center;
        height: 100%;

        img {
          height: 30px;
          width: 30px;
        }

        span {
          color: #fff;
          font-size: 14px;
          margin-left: 3px;
        }
      }
    }
  }

  // 组件动画
  .filter-enter,
  .filter-leave-to {
    opacity: 0;
    transform: translateX(100%);
  }

  .filter-enter-active,
  .filter-leave-active {
    transition: all 0.3s linear;
  }
  .filter-enter-to,
  .filter-leave {
    transform: translateX(0%);
    opacity: 1;
  }

  .filter-icon {
    position: absolute;
    right: 0;
    top: 53px;
    width: 43px;
    height: 22px;
    padding: 0 10px 0 15px;
    transform: translateX(100%);
    z-index: 999;
    transition: all 0.3s linear;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255));

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 5px;
      height: 18px;
      border-left: 1px solid #b3b3b3;
      transform: translateY(-50%);
    }

    img {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
